<template>
  <div class="salary-container">
    <!-- <span class="salary-text">工资管理</span>
    <div>
      <svg-icon icon-class="lock" />
      <svg-icon icon-class="edit" />
    </div> -->
    <!-- CKGZ -->
    <el-button v-checkBtn="'CKGZ'">查看工资</el-button>
    <!-- ZGZ -->
    <el-button v-checkBtn="'ZGZ'">涨工资</el-button>

  </div>
</template>
<script>
export default {
  name: 'Salary',
  mounted() { 
    //  path + query获取参数的方法
    // console.log(this.$route.query.id);//1001
    // console.log(this.$route.query.name);//zh
  }
}

</script>

<style lang="scss" scoped>
// sfc style支持多种预处理器的 lang 指定对应的预处理器
// scss less 浏览器不认识 loader做转化 -> css
// 1.变量
  // less 中定义变量 @ 
  // scss中定义变量 $
// 2.嵌套语法 结构统一 好理解 嵌套层次别太深
// 3.模块化 js css 两个问题 复用+好维护

// 补充：
// 1.在哪个style语法中导入 就在哪个组件中生效 不是全局的
// 2. ~ 保证别名路径 @ （代表src）这里能正确识别 固定语法
// 3. import vs @import  import js 模块; @import css
// 4.main.js 导入的模块都是全局生效的
// 5.本地模块和三方模块 本地和三方都是可以进行导入的
@import '~@/styles/variables.scss';
$hight-color: red;
$border-base: 1px solid #ccc;
.salary-container{
  padding:30px;
  color: $hight-color;
  .salary-text {
    border: $border-base;
  }
}
</style>
